<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';
import right_2 from './components/right_2.vue';
// import brokenline from '@/components/brokenline.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import { name } from 'file-loader';
import api from '@/http/public.js';
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,
        // brokenline,
        right_2
    },
    setup() {
        const ViewRef = ref(null);
        // const dataInfo = ref({ color:['#4cdbfe','#99ffbb','#ffe274',] ,name: ['无功功率曲线'], data: [[393, 4, 3, 631, 333, 724, 9]] })
        const xDater = generateTimeArray();
        const dataInfo1 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb',], name: ['电网计划有功功率(MW)', '多能互补系统有功功率(MW)'], data: [] })
        const dataInfo2 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb',], name: ['电网计划无功功率(MVar)', '多能互补系统无功功率(MVar)'], data: [] })
        const dataInfo3 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['多能互补系统频率(HZ)'], data: [] })
        const dataInfo4 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['风电场有功功率历史数据(MW)', '风电场无功功率历史数据(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线'], data: [] })
        const dataInfo5 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['光伏电站实发有功功率历史数据(MW)', '光伏电站实发无功功率历史数据(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线'], data: [] })
        const dataInfo6 = ref({
            xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',],
            name: ['光热电站实发有功功率(MW)', '光热电站实发无功功率(MVar)', '提前24h预测曲线', '提前4h预测曲线', '提前15min预测曲线', '储热罐储热量'], data: []
        })
        const dataInfo7 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['电加热器实时用电功率历史数据'], data: [] })
        const dataInfo8 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['电化学储能实发有功功率历史数据(MW)', '电化学储能实发无功功率历史数据(MVar)', '电化学储能实时储电量(%)'], data: [] })
        const dataInfo9 = ref({ xData: xDater, color: ['#4cdbfe', '#99ffbb', '#ffe274',], name: ['无功补偿装置实时无功功率'], data: [] })
        const dataContainer = reactive({
            loading: false,
            times: '',
            times1: '',
            times2: '',
            times3: '',
            times4: '',
            times5: '',
            times6: '',
            times7: '',
            times8: '',
            times9: ''
        });
        const size = ref < 'default' | 'large' | 'small' > ('default')
        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function generateTimeArray() {
            return Array.from({ length: 24 * 60 }, (_, index) => {
                const hour = Math.floor(index / 60);
                const minute = index % 60;
                return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
            });
        }
        function isAarrys(arr) {
            if (Array.isArray(arr)) {
                return arr
            } else {
                return []
            }
        }
        function getDatesInRange(startDate, endDate) {
            const dateArray = [];
            const currentDate = new Date(startDate);

            while (currentDate <= new Date(endDate)) {
                dateArray.push(currentDate.toISOString().split('T')[0]);
                currentDate.setDate(currentDate.getDate() + 1);
            }

            return dateArray;
        }
        function init() {
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            dataInfo1.value.data = []
            dataInfo2.value.data = []
            dataInfo3.value.data = []
            api.getShow1({
                code: 'show_10', dat: { cod2: 'dat1', q: '' }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)

                dataInfo1.value.data[0]=(isAarrys(res.dat))
                // dataInfo1.value.data.push(isAarrys(res.dat[2]))
                // dataInfo2.value.data.push(isAarrys(res.dat[1]))
                // dataInfo2.value.data.push(isAarrys(res.dat[3]))
                // dataInfo3.value.data.push(isAarrys(res.dat[4]))

                console.log(res[2])

                // dataInfo1.value.data=
            })
            api.getShow1({
                code: 'show_10', dat: { cod2: 'dat3', q: '' }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                dataInfo1.value.data[1]=(isAarrys(res.dat))
                // dataInfo2.value.data.push(isAarrys(res.dat[1]))
                // dataInfo2.value.data.push(isAarrys(res.dat[3]))
                // dataInfo3.value.data.push(isAarrys(res.dat[4]))

                console.log(res[2])

                // dataInfo1.value.data=
            })
            api.getShow1({
                code: 'show_10', dat: { cod2: 'dat2', q: '' }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                dataInfo2.value.data[0]=(isAarrys(res.dat))
                // dataInfo2.value.data.push(isAarrys(res.dat[1]))
                // dataInfo2.value.data.push(isAarrys(res.dat[3]))
                // dataInfo3.value.data.push(isAarrys(res.dat[4]))

                console.log(res[2])

                // dataInfo1.value.data=
            })
            api.getShow1({
                code: 'show_10', dat: { cod2: 'dat4', q: '' }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                dataInfo2.value.data[1]=(isAarrys(res.dat))
                // dataInfo2.value.data.push(isAarrys(res.dat[1]))
                // dataInfo2.value.data.push(isAarrys(res.dat[3]))
                // dataInfo3.value.data.push(isAarrys(res.dat[4]))

                console.log(res[2])

                // dataInfo1.value.data=
            })
            api.getShow1({
                code: 'show_10', dat: { cod2: 'dat5', q: '' }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                dataInfo3.value.data[0]=(isAarrys(res.dat))
                // dataInfo2.value.data.push(isAarrys(res.dat[1]))
                // dataInfo2.value.data.push(isAarrys(res.dat[3]))
                // dataInfo3.value.data.push(isAarrys(res.dat[4]))

                console.log(res[2])

                // dataInfo1.value.data=
            })
            api.getShow1({
                code: 'show_4', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo4.value.data = res.dat.his

            })
            api.getShow1({
                code: 'show_5', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo5.value.data = res.dat.his

            })
            // console.log(getDatesInRange('2024-12-01', dataContainer.times))
            // dataInfo6.value.xData = getDatesInRange('2024-12-01', dataContainer.times)
            api.getShow1({
                code: 'show_6', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                let lengthData1 = []
                res.dat.his = res.dat.his.map((v, index) => {
                    const list = []
                    if (!Array.isArray(v)) {
                        v = []
                    } else {
                        for (let i = 0; i < dataInfo6.value.xData.length; i++) {
                            list.push(v[i] / 1439)
                        }
                        v = list
                    }
                    if (index == res.dat.his.length - 1) {
                        v.forEach(k => {
                            lengthData1.push(((k * 1000) / 10).toFixed(2))
                        })
                    }
                    return v
                })
                dataInfo6.value.data = res.dat.his
                dataInfo6.value.data[dataInfo6.value.data.length - 1] = lengthData1
            })
            api.getShow1({
                code: 'show_7', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo7.value.data = res.dat.his
            })
            api.getShow1({
                code: 'show_8', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo8.value.data = res.dat.his
            })
            api.getShow1({
                code: 'show_9', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times, dataContainer.times,]
            }).then(res => {
                console.log(res)
                res.dat.his = res.dat.his.map(v => {
                    if (!Array.isArray(v)) {
                        v = []
                    }
                    return v
                })
                dataInfo9.value.data = res.dat.his
            })
        }
        onMounted(() => {
            computeRem();
            init()
            // var center = map.getCenter();
        });
        let timer = setInterval(() => {
            computeRem();
            init()
        }, 60000*5);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });
        return {
            dataContainer,
            ViewRef,
            size,
            dataInfo1,
            dataInfo2,
            dataInfo3,
            dataInfo4,
            dataInfo5,
            dataInfo6,
            dataInfo7,
            dataInfo8,
            dataInfo9
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt="">
                            <span class="temp">多云</span>
                            <span class="numberC">10</span>
                            <span class="cs">&nbsp; ℃</span> -->
                            <span class="numberC">历史数据</span>
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>
                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">多能互补系统有功曲线</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times1"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <brokenline v-if="dataInfo1.data.length" :dataInfo="dataInfo1"></brokenline>
                    </div>


                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">多能互补系统无功曲线</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times2"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>

                        <brokenline v-if="dataInfo2.data.length" :dataInfo="dataInfo2"></brokenline>
                    </div>

                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">

                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">多能互补系统频率曲线</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times3"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <brokenline v-if="dataInfo3.data.length" :dataInfo="dataInfo3"></brokenline>
                    </div>

                </div>

            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">风电站历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times4"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <brokenline v-if="dataInfo4.data.length" :dataInfo="dataInfo4"></brokenline>
                    </div>


                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">光伏电站历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times5"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>

                        <brokenline v-if="dataInfo5.data.length" :dataInfo="dataInfo5"></brokenline>
                    </div>

                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">

                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">光热电站历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times6"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <right_2 v-if="dataInfo6.data.length" :dataInfo="dataInfo6"></right_2>
                    </div>

                </div>

            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">电加热历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times7"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <brokenline v-if="dataInfo7.data.length" :dataInfo="dataInfo7"></brokenline>
                    </div>


                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">
                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">电化学历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times8"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>

                        <brokenline v-if="dataInfo8.data.length" :dataInfo="dataInfo8"></brokenline>
                    </div>

                </div>
                <div class="left_box">
                    <div class="left_box_item1" style="height: 19rem;">

                        <div
                            style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                            <div class="title">无功补偿装置历史数据</div>
                            <div class="onlod"><el-button size="small">下载</el-button></div>
                            <el-date-picker v-model="dataContainer.times9"
                                style="width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                        </div>
                        <brokenline v-if="dataInfo9.data.length" :dataInfo="dataInfo9"></brokenline>
                    </div>

                </div>

            </div>

        </div>
    </el-scrollbar>
</template>

<style lang="scss" scoped>
::v-deep .el-range-input {
    color: #fff;
}

::v-deep .el-range-separator {
    color: #fff;
}

::v-deep .el-picker-panel__body-wrapper {
    background: #031045c7 !important;
}

.big-screen-view {

    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/images/bjdazong.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        justify-content: space-between;
        width: 100%;

        >.left_box {
            padding: 0 0.625rem;
            // height: 100%;
            margin-top: 1.250rem;
            overflow: hidden;

            // flex: 1 1 0;
            .title {
                color: #FFFFFF;
                font-size: 1rem;
                // margin-left: 1rem;
                background: url('@/assets/img-show2/smallTitle.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 1.875rem;
                line-height: 1.875rem;
                width: 34rem;
                padding-left: 1rem;
            }



        }

        .left_box {
            width: 33%;

            .left_box_item1 {
                background-image: url('@/assets/img-show2/borderBack.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                // margin-bottom: 1.250rem;
                overflow: hidden;

                .onlod {
                    width: 4rem;
                    text-align: center;
                    // background-color: aqua;
                    color: #fff;
                    margin-right: 10px;
                    margin-top: 5px;
                }

                .box_img {
                    text-align: center;
                    padding: 0.625rem;
                    height: 100%;

                    .imgs {
                        width: 95%;
                        height: 80%;
                    }
                }

                // padding: 1.000rem;
            }
        }


    }


}
</style>
